<template>
	<view class="page_box">
		<view style="height: 100rpx;"></view>
		<view class="page_topBox">
			<image src="@/static/Login.png" class="page_topBoxImg" mode="aspectFill"></image>
			<view class="" style="height: 50%;"></view>
			<view class="page_topTitle">
				<!-- <image src="@/static/haoyun.png" mode="aspectFill" class="page_topTitleImg"></image> -->
				<view class="page_topTitleTetx" style="font-size:65rpx;color: #fff;font-weight: 600;">E路同程</view>
				<view class="page_topTitleTetx">注册/登录</view>
			</view>
		</view>
		<view class="page_Login">
			<view style="height: 132rpx;"></view>
			<view class="page_phone">
				<view class="page_jia">
					+86
				</view>
				<view style="width: 20rpx;"></view>
				<view class="page_phoneBox">
					<input type="number" maxlength="11" v-model="form.phone" placeholder="输入手机号" />
				</view>
			</view>
			<view class="page_phoneCode">
				<input type="number" maxlength="8" v-model="code" placeholder="输入验证码" />
				<view class="pages_btn">
					<view class="page_Code" @click="obtainCode" v-if="codeValue=='获取'">
						{{codeValue}}
					</view>
					<view style="font-size: 30rpx;" v-else>
						<span style="color: #11A5FA;">{{codeValue}}s</span><span style="color: #1A1A1B;">后重新发送</span>
					</view>
				</view>
			</view>
			<view class="page_yonghu">
				<u-checkbox-group v-model="value1" style="margin-left: 150rpx;" placement="column"
					@change="groupChange">
					<u-checkbox>
					</u-checkbox>
				</u-checkbox-group>
				<view class="page_text">
					我已阅读并同意<span @click="toUser" style="color: #02A7F0;">用户服务协议</span>和<span  style="color: #02A7F0;" @click="toprivacy">隐私政策</span>
				</view>
			</view>
			<view style="height: 10vh;"></view>
			<view class="Login_box" @click="toIndex">立即登录</view>
			<view class="Login_text">未注册手机号验证后自动注册</view>
		</view>
		<view class="page_dibu"></view>
		<view class="" style="height: 20rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				codeValue: '获取',
				value1: [],
				code:'',
				form: {
					port: "DRIVER_LOGIN",
					phone: ''
				},
			}
		},
		onLoad() {

		},
		methods: {
			toUser(){
				uni.navigateTo({
					url:'/pages/login/user/user'
				})
			},
			toprivacy(){
				uni.navigateTo({
					url:'/pages/login/privacy/privacy'
				})
			},
			async toIndex() {
				if(!this.code){
					uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return false
				}
				let that = this
				let res = await this.$http.users.owner_login({
					phone: this.form.phone,
					code: this.code
				})
				if (res.data.code == 200) {
					uni.setStorageSync("userid", res.data.data.user_id)
					this.$store.commit('users/setToken', res.data.data.access_token)
					uni.switchTab({
						url: '/pages/getOrder/getOrder',
						success() {
							that.$http.driver.recordsUserLoginInfo({
								type: 0,
								userPort: 'driver'
							})
						}
					})
				} else {
					this.code = ''
				}
			},
			obtainCode() {
				if (!this.form.phone) {
					uni.showToast({
						title: '请填写正确手机号',
						icon: 'none'
					})
					return false;
				}
				var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!reg.test(this.form.phone)) {
					uni.showToast({
						title: '请填写正确手机号',
						icon: 'none'
					})
					return false;
				}
				let that = this
				if (this.codeValue == '获取') {
					if (this.value1.length) {
						this.$http.users.send_login_sms(this.form).then((res)=>{
							that.codeValue = 60
							let timer = setInterval(() => {
								that.codeValue--
								if (that.codeValue == 1) {
									clearInterval(timer)
									that.codeValue = '获取'
								}
							}, 1000);
							
						})
					} else {
						uni.showToast({
							title: '请勾选用户隐私政策',
							icon: 'none',
						})
					}
				}
			},
			groupChange() {
				//console.log(this.value1)
				if (this.value1) {
					this.value1 = false
				}
			}
		}
	}
</script>

<style scoped>
	.pages_btn {
		width: 45%;
		display: flex;
		justify-content: flex-end;
		margin-right: 30rpx;
	}

	.Login_text {
		width: 560rpx;
		margin-left: 60rpx;
		margin-top: 33rpx;
		font-size: 26rpx;
		color: #AFAFAF;
		text-align: center;
	}

	.Login_box {
		width: 560rpx;
		height: 110rpx;
		border-radius: 55rpx;
		background-color: #11A5FA;
		color: #fff;
		text-align: center;
		line-height: 110rpx;
		font-size: 34rpx;
		font-weight: 600;
		margin-left: 60rpx;
	}

	.page_yonghu {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
		right: 12%;
		margin-top: 55rpx;
	}

	.page_text {
		font-size: 26rpx;
		color: #AFAFAF;
	}

	.page_text span {
		color: #1A1A1B;
	}

	.page_Code {
		width: 120rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		font-size: 30rpx;
		background-color: #11A5FA;
		border-radius: 50rpx;
	}

	.page_phoneCode input {
		width: 55%;
		margin-left: 37rpx;
	}

	.page_phoneCode {
		width: 600rpx;
		height: 110rpx;
		background-color: #F2F2F1;
		border-radius: 50rpx;
		margin-top: 34rpx;
		margin-left: 45rpx;
		display: flex;
		align-items: center;
	}

	.page_jia {
		width: 129rpx;
		height: 110rpx;
		background-color: #F2F2F1;
		border-radius: 50rpx 0 0 50rpx;
		font-size: 36rpx;
		font-weight: 600;
		text-align: center;
		line-height: 110rpx;
	}

	.page_phoneBox {
		width: 450rpx;
		height: 110rpx;
		border-radius: 0 50rpx 50rpx 0;
		background-color: #F2F2F1;
		display: flex;
		align-items: center;
	}

	.page_phoneBox input {
		width: 100%;
		margin-left: 37rpx;
	}

	.page_phone {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.page_Login {
		width: 680rpx;
		background-color: #fff;
		border-radius: 80rpx 0 0 80rpx;
		margin-left: 70rpx;
		position: relative;
		padding-bottom: 40rpx;
	}

	.page_dibu {
		width: 720rpx;
		height: 108rpx;
		background-color: #2E90C9;
		border-radius: 58%;
		margin-left: 70rpx;
		margin-top: -50rpx;
	}

	.page_box {
		width: 100vh;
		height: 100vh;
		background-color: #11A5FA;
	}

	page {
		background-color: #11A5FA;
	}

	.page_topBox {
		position: relative;
		width: 100%;
		height: 459rpx;
	}

	.page_topBoxImg {
		width: 697rpx;
		height: 459rpx;
		position: absolute;
		margin-left: 30rpx;
	}

	.page_topTitleImg {
		width: 261rpx;
		height: 84rpx;
	}

	.page_topTitle {
		/* position: absolute;
		bottom: 15%;
		left: 6%; */
	margin-left: 80rpx;
	}

	.page_topTitleTetx {
		font-size: 32rpx;
		color: #C5E7FB;
	}
</style>